<template>
    <div class="watermark">
      <div v-for="(item, index) in rows" :key="index" class="watermark-row">
        <div class="watermark-text" v-for="n in 3" :key="n" :style="getTextStyle()">
          {{ watermarkText }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getNavbar } from "@/api/index";
  export default {
    data() {
      return {
        watermarkText: ' 员工 - ID123', // 水印内容
        rows: 6, // 水印行数
      };
    },
    mounted() {
    this.getlist();
  },
    methods: {
       //查询
    getlist() {
   
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getBasicInfo",
        
      };
      getNavbar(param).then((res) => {
     
        this.watermarkText=res.data.userName + ' - ' + res.data.uid;

      });
    },
      getTextStyle() {
        return {
          transform: 'rotate(-30deg)', // 倾斜角度
          opacity: 0.1, // 透明度
          whiteSpace: 'nowrap',
          margin: '0 10px', // 水印之间的水平间距
        };
      },
    },
  };
  </script>
  
  <style scoped>
  .watermark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* 让水印不会阻止点击事件 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: space-around; /* 行间距 */
    overflow: hidden; /* 防止溢出 */
    z-index: 9999;
  }
  
  .watermark-row {
    display: flex; /* 每一行使用 flexbox 布局 */
    justify-content: space-around; /* 平均分配 */
  }
  
  .watermark-text {
    font-size: 32px; /* 水印文字大小 */
    color: black; /* 水印文字颜色 */
    flex: 1; /* 使每个水印文本在行内均分宽度 */
    text-align: center; /* 水印文本居中 */
  }
  </style>
  